<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 表格容器 -->
<table id="demo" lay-filter="test"></table>
<!-- 脚本开始 -->
<script>
layui.use('table', function() {
	var table = layui.table;
	
//第一个实例
table.render({
  elem: '#demo'
  ,url: 'EmpServlet?method=getEmpList' //数据接口
  ,page: true //开启分页
  ,cols: [[ //表头
    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
    ,{field: 'url', title: '头像', width:80,templet:function (d) { return '<div><img src='+d.url+' width="50px"></div>'}} //这里的templet值是模板元素的选择器
    ,{field: 'name', title: '员工名', width:80}
    ,{field: 'sex', title: '性别', width:80, sort: true}
    ,{field: 'sal', title: '工资', width:80}
    ,{field: 'did', title: '部门编号', width:177} 
    ,{field: 'deptName', title: '部门名称', width:177} 
    
  ]]
});
});
</script>
</body>
</html>